<script setup>
import Header from '@/components/header/index.vue'
import UserInfoEditor from '@/components/userInfoEditor/index.vue'
import { useRoute } from 'vue-router';
import { ref } from 'vue'
import html2pdf from 'html2pdf.js'
import { saveAs } from 'file-saver'

const route = useRoute();
const resumeId = route.query.resumeId;
import { useResumeStore } from '@/stores/resume'
const data = useResumeStore()
data.setActive(resumeId)
const resumeRef = ref()

const exportType = {
    1() {
        // PDF导出
        const element = resumeRef.value.$el;
        const opt = {
            margin: 0.5,
            filename: `${data.activeResume.resumeInfo.resumeName}.pdf`,
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2, useCORS: true },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
        };
        
        // 临时调整样式以适应PDF
        const originalOverflow = element.style.overflow;
        element.style.overflow = 'visible';
        
        html2pdf().from(element).set(opt).save().then(() => {
            // 恢复原始样式
            element.style.overflow = originalOverflow;
        });
    },
    2() {
        // 浏览器打印
        const printContents = resumeRef.value.$el.innerHTML;
        const originalContents = document.body.innerHTML;
        
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
        
        // 重新加载页面以恢复功能
        window.location.reload();
    },
    3() {
        // JSON导出
        const jsonData = JSON.stringify(data.activeResume, null, 2);
        const blob = new Blob([jsonData], { type: 'application/json' });
        saveAs(blob, `${data.activeResume.resumeInfo.resumeName}.json`);
    }
}

const exportResume = (e) => { 
    exportType[e]();
}
</script>

<template>
<div class="resumeMaker-main">
    <Header v-model:title="data.activeResume.resumeName" @exportResume="exportResume"></Header>
    <UserInfoEditor :data="data" >
        <div class="userInfo-preview">
            <router-view ref="resumeRef"></router-view>
        </div>
    </UserInfoEditor>
</div>
</template>

<style scoped>
.resumeMaker-main{
    background-color:rgb(10, 10, 10);
    border: 1px solid rgb(39, 39, 39);
    border-radius: 10px;
}
.userInfo-preview{
    width: 23.5cm;
    height: calc(100vh - 65px);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow-x: scroll;
    overflow-x: hidden;
    background-color: white;
    color: black;
}
.userInfo-preview::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}
.model-wrapper{
    width: 21cm;
}

@media print {
    body * {
        visibility: hidden;
    }
    .userInfo-preview, .userInfo-preview * {
        visibility: visible;
    }
    .userInfo-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        overflow: visible;
        background-color: white;
    }
}
</style>